<template>

    <el-menu :default-active="$route.path" :router="true" background-color=#282c34 text-color="#fff">

         <SideMenu2 :menusdata="menusdata" /> 
      <!-- <SideMenu2 :menusdata="adminStore.menusdata" />  -->
    </el-menu>


</template>


<script lang="ts" setup>
import { useAdminStore } from '@/store/admin';
import SideMenu2 from './SideMenu2.vue';
import { computed } from 'vue';
// import { title } from 'process';
// import path from 'path';
const adminStore=useAdminStore();

const menusdata=computed(()=>{
    return  menusDataFormat(adminStore.menusdata); 
})


const menusDataFormat=(menusdata:menuitem[]):menuitem[]=>{
return menusdata.reduce((prev: any[], item:menuitem)=>{
if(item.type =='button'){
    return prev;
}
//代码执行到这一行，说明item.type不是button
if(item.children){
const filterChildren=menusDataFormat(item.children);
if(filterChildren.length>0){
    //执行到这一行说明item.children是需要留下的
    return[
        ...prev,
        {
            ...item,
            children:filterChildren
        }
    ]
}
//代码执行到这一行，说明item原本有children属性
//但是，所有的children都不是菜单数据，因此不保留children
return[
    ...prev,{
       _id:item._id,
       title:item.title,
       icon:item.icon,
       path:item.path
    }
]


}
//代码执行到这一行，说明item没有children
return[
    ...prev,
    item
]









},[]);
}










// import {onMounted} from 'vue';
// import { permission } from 'process';


// console.log(adminStore.adminInfo);

// watchEffect(()=>{
//   console.log(adminStore.adminInfo);
  
// })


// onMounted(()=>{
//     adminStore.getAdminInfoAsync(); 
// })





//   import { onMounted, ref } from 'vue';
// //import { ref } from 'vue';
// import SideMenu2 from './SideMenu2.vue'

// import api from '@/api';
// let menusdata = ref<menuitem[]>([])
// onMounted(()=>{
//     getAdminInfo(); 
// })
// const getAdminInfo=async()=>{
//   const res=await api.admins.getInfo();
//   console.log(res);
//   if(res.code==200){
//     menusdata.value=res.data.role.permissions;
//     console.log(res.data.role.permissions);
    
//   }
  
// }












// let menusdata = ref<menuitem[]>([
//     { id: '1', title: '主页', icon: 'HomeFilled', path: '/home' },
//     {
//         id: '2', title: '用户', icon: 'User', path: '/users',
//         children: [
//             { id: '2-1', title: '用户管理', path: '/users/list' },
//             { id: '2-2', title: '用户分组', path: '/users/group' },
//         ]
//     },
//     {
//         id: '3', title: '设置', icon: 'Setting', path: '/setup',
//         children: [
//             {
//                 id: '3-0', title: '发货设置', path: '/setup/delivery',
//                 children: [
//                     { id: '3-1', title: '配送员管理', path: '/setup/delivery' },
//                     { id: '3-2', title: '权限设置1', path: '/setup/permission' },
//                 ]
//             },

//             {
//                 id: '3-3', title: '权限管理', path: '/setup/permission2',
//                 children: [
//                     { id: '3-1-1', title: '权限设置2', path: '/setup/permission2/menusd' },
//                     { id: '3-2-1', title: '角色管理', path: '/setup/permission2/admins' },
//                     { id: '3-3-1', title: '管理员账号', path: '/setup/permission2/roles' },
//                     { id: '3-4-1', title: '角色管理2', path: '/setup/permission2/settings' },
//                 ]


//             },


//         ]
//     },
//     {
//         id: '4', title: '商品', icon: 'Shop', path: '/products',
//         children: [
//             { id: '3-3', title: '商品分类', path: '/products/add' },
//             { id: '3-4', title: '商品管理', path: '/products/list' },

//         ]
//     },
//     {
//         id: '5', title: '订单', icon: 'List', path: '/homes',
//         children: [
//             { id: '3-5', title: '收银订单', path: '/homes/order' },

//         ]
//     },

//  ])




</script>

<style scoped>
.el-menu {
    --el-menu-bg-color: #282c34;
    --el-menu-text-color: #fff;
    border-right: none;
}

.el-menu-item.is-active {
    color: #fff;
    background-color: #0256ff;
}
</style>